<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <%@include file="style.jsp" %>
    <%@include file="script.jsp" %>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/script/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/script/ueditor/ueditor.all.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/script/ueditor/kendesign/ken.formdesign.v1.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/script/ueditor/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" charset="utf-8" src="${pageContext.request.contextPath}/script/plupload/plupload.full.min.js"></script>
    <script>
    	var path = "${pageContext.request.contextPath}";
    </script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/orderlang/distributor/css/add_product.css"/>
    <title>新增商品</title>
</head>
<body onselectstart="return false">
<div id="container_1" style="height:100%">
    <div style="position: relative">
        <%@include file="header.jsp" %>
    </div>
    <div id="content" class="clearfix">
        <%@include file="left_menu.jsp" %>
        <!--内容部分-->
        <div class="right-content" style="margin:75px 20px 0 213px;">
            <p class="brand">
                <a>商品</a>><a href="${pageContext.request.contextPath}/product/findProductList">商品查询</a>><a class="now">${actionType }</a>
            </p>
            <div class="content" >
                <div class="product-basic">
                     <div class="clearfix">
                         <div class="pic fl">
                         	<input type='file' id='imgUpload' class="hide"">
                             <div class="big-img">
                                 <img src="" alt=""/>
                             </div>
                             <div class="small-img">
                                 <span class="left-arrow fl scrollbutton disabled">&lt;</span>
                                 <span class="right-arrow fr scrollbutton">&gt;</span>
                                 <div class="img-list fl">
                                     <ul>
                                         <li class='addImg' id="addImg"><b></b></li>
                                     </ul>
                                 </div>
                             </div>
                         </div>
               			 <form id="product">
                           	<div id="uploadImg">
                           	</div>
                            <div class="left-block fl">
                                <div class="isGrounding">
									<span><b>*</b>立即上架</span>
										<c:if test="${product.isRelease == 1 }">
											<label for="true" class="status on">
												<input type="radio" name="isRelease" checked id="true" value="1" />
												是
											</label>
											<label for="false" class="status">
												<input type="radio" name="isRelease" id="false" value="0" />
												否
											</label>
										</c:if>
										<c:if test="${product.isRelease != 1 }">
											<label for="true" class="status">
												<input type="radio" name="isRelease" checked id="true" value="1" />
												是
											</label>
											<label for="false" class="status on">
												<input type="radio" name="isRelease" id="false" value="0" />
												否
											</label>
										</c:if>
										
								</div>
                                <div class="product-name">
                                    <span><b>*</b>商品名称</span>
                                    <input class="long" type="text" placeholder="请输入商品名称(最多20字)" id="product_name" name="productName" value="${product.productName }"/>
                                </div>
                                <div class="product-type clearfix">
                                	<span class="fl"><b>*</b>商品类别</span>
	                                <div class="fl">
                                        <span>▼</span>
                                        <input type="text" readonly class="short show" value="${product.categoryName }" placeholder="全部分类"/>
                                        <input type='text' class="hidden" id="productCategoryId"  name="categoryId" value="${product.categoryId }"/>
		                                <ul class="categoryList hide">
		                                </ul>
	                                </div>
                                </div>
                                <div class="product-tag">
                                    <span><b>*</b>商品标签</span>
                                    <button class="btn1">选择标签</button>
                                    <button class="btn2">新增标签</button>
                                    <div class='fr hide add-tag'>
                                    	<input type="text"/>
                                    	<button class="btn3">确认</button>
                                    	<button class="btn4">取消</button>
                                    </div>
                                    <div class="tags-box">
                                    </div>
                                    <input type='text' class="hidden" id="productTag" name="productTag"/>
                                </div>
                                <div class="product-unit clearfix select-box">
                                    <span class="fl"><b>*</b>商品单位</span>
                                    <div class="fl">
                                        <span>▼</span>
		                                <input type="text" readonly class="short show" placeholder="选择商品单位" id="littleUnit" value="${littleUnitName }"/>
		                                <input type="text" class="hidden" name="littleUnitId" value="${product.littleUnitId }"/>
		                                <ul class="hide">
		                                </ul>
		                            </div>
		                            <c:if test="${bigUnitName != null }">
		                            	<div class="fl check selected">大小单位</div>
		                            </c:if>
		                            <c:if test="${bigUnitName == null }">
		                            	<div class="fl check">大小单位</div>
		                            </c:if>
		                        </div>
		                        <div class="convert clearfix hide">
		                            <span class="fl">换算关系</span>
		                            <div class="fl">
		                                1大单位=
		                                <input type="text"  id="unitConvert" name="unitConvert" value="0"/>
		                                小单位
		                            </div>
		                        </div>
		                    </div>
                    	<div class="fl right-block clearfix">
                        <div class="product-number">
                            <span><b>*</b>商品编号</span>
                             <input class="long" type="text" id="code" name="productCode" placeholder="请输入商品编号" value="${product.productCode }"/>
                        </div>
                        <div class="product-brand clearfix select-box">
                            <span class="fl"><b>*</b>商品品牌</span>
                            <div class="fl">
                                <span>▼</span>
                                 <input type="text" readonly class="short show" value="${product.brandName }" placeholder="请选择品牌"/>
                                 <input type='text' class="hidden" style="display:none" id="brandId" name="brandId" value="${product.brandId }">
                          <ul class="hide">
                          </ul>
                            </div>
                        </div>
                        <div class="key-word">
                            <span>关键词</span>
                            <input class="long" type="text" placeholder="长度小于20个字符，用逗号隔开" id="keyWord" name="keyWord" value="${product.keyWord }">
                        </div>
                        <div class="product-sort">
                            <span><b>*</b>商品排序</span>
                            <input class="long" type="text" placeholder="数字越小，商品展示排序越靠前" id="sortNum" name="seq" value="${product.seq }" onkeyup="this.value=this.value.replace(/\D/g,'')"
                                    onafterpaste="this.value=this.value.replace(/\D/g,'')"/>
                        </div>
                        <div class="big-unit clearfix select-box hide">
                            <span class="fl">大单位</span>
                            <div class="fl">
                                <span>▼</span>
                                <input type="text" readonly class="short show" placeholder="请选择商品大单位" id="bigUnit" value="${bigUnitName }"/>
                                <input type="text" class="hidden" name="bigUnitId" value="${product.bigUnitId }"/>
                        <ul class="hide">
                        </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <div class="product-spec">
                	<input type="text" class="hidden" name="specList" id="specList"/>
                    <div class="add-spec">
                        <div class="set-spec">
                            <button class="add-btn">+添加规格</button>
                        </div>
                        <div class="title clearfix">
                            <div class="fl">名称</div>
                            <div class="fl">规格详情<span>（输入一个规格按"回车键"快速添加）</span></div>
                        </div>
                        <div class="spec-list">
                            <div class="spec-item">
                                <div class="spec-name fl default">
                                    <input type="text" class="spec_name"  name="spec.name" value="默认规格"/>
                                </div>
                                <div class="spec-params">
                                	<input type="text" style="display:none" id="specValue" name="spec.name" value="${productSpec.name}"/>
                                    <p class="fl">默认<i></i></p>
                                    <input class="spec-input" type="text"/>
                                </div>
                            </div>
                            
                        </div>
                        <div class="spec-detail">
                        	<input type="text" class="hidden" name="productList" id="productList"/>
							<table>
                                <thead>
                                	<c:if test="${product.productName == null or product.productName == '' }">
	                                	<tr>
		                                	<td></td>
		                                	<td class="spec-td">默认规格</td>
		                                	<td class="market-price">市场价</td>
		                                	<td class="cost-price">成本价</td>
		                                	<td class="MOQ">起订量</td><td></td>
	                                	</tr>
                                	</c:if>
                                </thead>
                                <tbody>
                                	<c:if test="${product.productName == null or product.productName == '' }">
	                                	<tr>
		                                	<td>
		                                		<span></span>
		                                	</td>
			                                <td class="spec-td params spec" data-specname="默认规格">
			                                	<div class="spec-select">
			                                	<s>▼</s>
			                                	<input type="text" placeholder="选择规格" value="默认" readonly="">
			                                	<ul class="hide">
			                                	</ul>
			                                	</div>
		                                	</td>
		                                	<td class="market-price params" data-specname="marketPrice">
		                                		<input type="text" value="1">
		                                	</td>
		                                	<td class="cost-price params" data-specname="costPrice">
		                                		<input type="text" value="1">
		                                	</td>
		                                	<td class="MOQ params" data-specname="moq">
		                                		<input type="text" value="1">
		                                	</td>
		                                	<td></td>
	                                	</tr>
	                                </c:if>
                                </tbody>
                            </table>
                            <button class="add-rows">+添加商品</button>
                        </div>
                        <div class="product-description">
                            <h5>商品描述</h5>
                            <div class="text">
                                <script id="goods_property" name="goods_property" type="text/plain"
                                        style="width: 100%;height:300px;"></script>
                                <script type="text/javascript">
                                    //实例化编辑器
                                    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor       ('editor')就能拿到相关的实例
                                    var ueditorPro = UE.getEditor('goods_property');
                                    var html = "${product.productDetail}";
                                    ueditorPro.addListener("ready", function () {
                                        // editor准备好之后才可以使用ass
                                        ueditorPro.setContent(html);
                                    });
                                </script>
                            </div>
                        </div>
                        <input name="content" id="ueditor_content" type="hidden"/>
                        <input id="attachment-upload" type="hidden"/>
                    </div>
                </div>
                    <div class="price-set">
                        <h4>价格设置</h4>
                        <div class="level-price">
                            <table class="showTable">
                                <thead>
                                    <tr>
                                        <td width="150">客户级别</td>
                                        <td width="150">折扣</td>
                                        <td></td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr data-id='1'>
                                        <td width="150">股东</td>
                                        <td width="150">
                                            <input type="text" id="partnerDiscount" name="partnerDiscount" value="90" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'')"
			    							onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'')"/>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr data-id='2'>
                                        <td width="150">钻石会员</td>
                                        <td width="150">
                                            <input type="text" id="diamondMemberDiscount" name="diamondMemberDiscount" value="95" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'')"
			    							onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'')"/>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr data-id='3'>
                                        <td width="150">金卡会员</td>
                                        <td width="150">
                                            <input type="text" id="goldMemberDiscount" name="goldMemberDiscount" value="98" onkeyup="this.value=this.value.replace(/[^\d\.]/g,'')"
			    							onafterpaste="this.value=this.value.replace(/[^\d\.]/g,'')"/>
                                        </td>
                                        <td></td>
                                    </tr>
                                    <tr data-id='0'>
                                        <td width="150">普卡会员</td>
                                        <td width="150">
                                            <input type="text" readonly name="normal" value="100" style="border:none;width:35px;padding:0;text-align:center;"/>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <input type="hidden" name="id" id="productId"/>
                </form>
                <div class="product-attachment">
                    <h5>商品附件</h5>
                    <div>
                        <s class="fl"></s>
                        <span class="fl" id="uploadFile">添加附件</span>
                        <h6 class="fl">（商品附件最大20M，支持格式：PDF、Word、Excel、Txt、JPG、PNG、BMP、GIF）</h6>
                    </div>
                </div>
                <div class="fix-btn">
                    <input type="submit" class="submit" value="保存"/>
                    <input type="reset" class="reset" value="取消"/>
                </div>
            </div>
        </div>
        <script src="${pageContext.request.contextPath}/static/orderlang/distributor/js/add_product.js"></script>
        <!--内容部分结束-->
        <script type="text/javascript">
	      	//实例化一个plupload上传对象
	        var uploader = new plupload.Uploader({
	             browse_button : 'addImg', //触发文件选择对话框的按钮，为那个元素id
	             url : path + '/sys/uploadfile/upload', //服务器端的上传页面地址
	             flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
	             silverlight_xap_url : 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
	             multi_selection : false,
	             filters: {
	                   mime_types: [
	                       {title:"Image files",extensions:"jpg,png"}
	                   ],
	                   max_file_size : '10mb', //最大只能上传400kb的文件
	                   prevent_duplicates : false //不允许选取重复文件
	                 }
	        });
	        
	        //在实例对象上调用init()方法进行初始化
	        uploader.init();
	        
	        //绑定各种事件，并在事件监听函数中做你想做的事
            uploader.bind('FilesAdded',function(uploader,files){
               //每个事件监听函数都会传入一些很有用的参数，
               //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
               
               uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
            });
         	// 上传过程中事件
            uploader.bind('UploadProgress',function(uploader,file){
               //每个事件监听函数都会传入一些很有用的参数，
               //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
            });
         	
         	// 上传完成事件
            uploader.bind('FileUploaded',function(uploader,file,responseObject){
               var fileInfo=JSON.parse(responseObject.response); 
               var fileName =fileInfo.url +"/"+ fileInfo.realname;//拼接图片在服务器所在路径字符串
               
               var html = '<input name="imgHref" type="hidden" value="'+fileName+'"/>';
               $("#uploadImg").append(html);//给隐藏输入框赋值
               
               var htmlView = '<li><s>X</s><img src="/docs/'+fileName+ '"/></li>';
               $('.big-img').find('img').attr('src',"/docs/"+fileName);
               $(".img-list").children('ul').append(htmlView);
            });
            uploader.bind('Error',function(uploader,errObject){
                if(errObject.code == -600){
                	layer.alert("文件过大");
                }else if(errObject.code == -601){
                	layer.alert("文件类型不符");
                }
            });
	        
            
          	//实例化一个plupload上传对象
	        var uploaderFile = new plupload.Uploader({
	             browse_button : 'uploadFile', //触发文件选择对话框的按钮，为那个元素id
	             url : path + '/sys/uploadfile/upload', //服务器端的上传页面地址
	             flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
	             silverlight_xap_url : 'js/Moxie.xap', //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
	             multi_selection : false,
	             filters: {
	                   mime_types: [
	                       {title:"Image files",extensions:"jpg,png,bmp,gif,pdf,word,excel,txt"}
	                   ],
	                   max_file_size : '10mb', //最大只能上传400kb的文件
	                   prevent_duplicates : true //不允许选取重复文件
	                 }
	        });
	      	//在实例对象上调用init()方法进行初始化
	        uploaderFile.init();
	      	//绑定各种事件，并在事件监听函数中做你想做的事
            uploaderFile.bind('FilesAdded',function(uploader,files){
               //每个事件监听函数都会传入一些很有用的参数，
               //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
            	if(uploaderFile.files.length > 1){
            		uploaderFile.removeFile(uploaderFile.files[0]);
                }
                uploaderFile.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
            });
         	// 上传完成事件
            uploaderFile.bind('FileUploaded',function(uploader,file,responseObject){
               var fileInfo=JSON.parse(responseObject.response); 
               var fileName =fileInfo.url +"/"+ fileInfo.realname;//拼接图片在服务器所在路径字符串
               
               $("#uploadFile").html(fileInfo.viewname);
               $("#attachment-upload").val(fileName);
            });
        </script>
    </div>
</div>

</body>
</html>